<template>
  <div id="bottom">
    <div id="cloth">
      <button id="return" @click="release">&#xe6ff;</button>
      <div id="bigdetailed">
        <div id="top">
          <img :src="require('@/assets/' + datas.url)" :alt="datas.gname" />
          <div id="right">
            <p id="name">
              商品名称：<input
                type="text"
                v-model="datas.gname"
                class="input"
              />
            </p>
            <p id="money">
              商品价格：<input
                type="text"
                v-model="datas.price"
                class="input"
              />
            </p>
            <p id="discount">原价：{{ datas.price / 0.8 }}</p>
            <p id="introduce">
              商品描述
              <span
                id="state"
                :style="datas.state == 1 ? 'color:blue' : 'color:red'"
                >{{ datas.state == 0 ? "已售" : "在售" }}</span
              >
              ——————————————————————————
            </p>
            <p id="content">
              <textarea
                wrap="50"
                rows="8"
                name="detailed"
                v-model="datas.detailed"
              >
              </textarea>
            </p>
            <p id="date">
              <button id="updata" @click="updata">更改</button> 发布于
              {{ $route.params.datas.date }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script scoped>
import VueCookies from "vue-cookies";
import axios from "axios";
import router from "../router";

export default {
  props:['gid','gname','state'],
  methods: {
    release: function () {
      // 返回前将修改的数据改回去
      (this.datas = this.$route.params.datas),
        // 返回页面
        router.replace({
          name: "Goods",
        });
    },
    updata: function () {
      // 判断是否可以填写完整
      if (
        this.datas.gname.toString().trim() != "" &&
        this.datas.price.toString().trim() != "" &&
        this.datas.detailed.toString().trim() != ""
      ) {
        // 根据gid更改商品信息
        axios({
          method: "POST",
          url: "http://localhost:8081/lo/intercept/goods/updategoods",
          params: {
            uid: VueCookies.get("uid"),
            ucookie: VueCookies.get("ucookie"),
            gid: this.datas.gid,
            gname: this.datas.gname,
            price: this.datas.price,
            detailed: this.datas.detailed,
          },
          headers: {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          },
        }).then(
          (response) => {
            // console.log(response.data);
            alert("修改成功");
            // 修改数据
            // console.log(this.state);
            this.$emit(
              "get",
              this.gid,
              this.gname,
              this.state
            ); //依据当前的搜索结果，并非全部查询
            // 返回
            router.replace({
              name: "Goods",
            });
          },
          (error) => {
            alert("请求失败,请检查服务器是否开启！");
          }
        );
      } else {
        alert("请将内容填写完整！");
      }
    },
  },
  data() {
    return {
      datas: { ...this.$route.params.datas }, // 这样赋值不会影响传过来的数据
      uid: VueCookies.get("uid"),
      ucookie: VueCookies.get("ucookie"),
    };
  },
};
</script>
  
  <style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_five.ttf") format("truetype");
}
#bottom {
  width: 100%;
  height: 1000px;
  position: fixed;
  top: 0px;
  z-index: 9;
  background-color: rgba(221, 218, 218, 0.5);
  /* opacity: 0.5; */
}
#bottom #cloth {
  width: 80%;
  height: 600px;
  position: fixed;
  z-index: 10;
  top: 80px;
  left: 10%;
  background-color: rgb(255, 255, 255);
  overflow: hidden; /* 清除浮动 */
}

#cloth #return {
  font-family: "iconfont" !important;
  font-size: 55px;
  border: 0px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer; /* 经过有手指*/
}

#cloth #left {
  width: 30%;
  height: 480px;
  float: left;
  margin-top: 80px;
  margin-left: 50px;
  /* border: 1px solid rebeccapurple; */
}

#left img {
  width: 95%;
  height: auto;

  object-fit: scale-down; /* 让img的尺寸不被拉伸 */
}

#cloth #right {
  width: 50%;
  height: 300px;
  float: left;
  margin-top: 80px;
  margin-left: 80px;
  /* border: 1px solid rebeccapurple; */
}

#right #state {
  float: right;
  margin-right: 100px;
}

#right .input {
  height: 35px;
  font-size: 20px;
}

#right #content,
select {
  font-size: 20px;
  margin-left: 30px;
  margin-left: 0px;
}

#right #content input {
  height: 24px;
  /* border: 0px; */
  padding: 0px;
  padding-left: 10px;
  vertical-align: bottom; /*调整对齐线*/
}

#right #content textarea {
  width: 300px;
  resize: none;
  vertical-align: top; /*调整对齐线*/
  padding-left: 10px;
  padding-top: 10px;
}

#right #info {
  width: 100px;
  height: 50px;
  margin-top: 50px;
  margin-left: 150px;
}
/* ********************************* */
#bigdetailed {
  /* overflow: hidden; */
  width: 100%;
  /* height: 1200px; */
  background-color: #eeeeee;
}

#bigdetailed #top {
  width: 85%;
  height: 600px;
  /* border: 1px solid #000; */
  margin-left: 10%;
  padding-top: 110px;
}

#top img {
  display: inline-block;
  float: left;
  width: 38%;
  height: 400px;
  margin-left: 2%;
  vertical-align: bottom; /*调整对齐线*/
  object-fit: scale-down;
}

#top #right {
  display: inline-block;
  width: 48%;
  height: 400px;
  margin: 0px;
  margin-left: 5%;
  /* border: 1px solid #000; */
  padding-left: 5%;
}

#top #right #name {
  font-size: 20px;
  /* text-indent: 20px; */
}

#top #right #money {
  font-size: 20px;
  /* text-indent: 20px; */
}

#top #right #discount {
  font-size: 18px;
  text-decoration: line-through;
  color: #beb9b6;
  /* text-indent: 20px; */
}
#top #right #introduce {
  margin-top: 40 px;
  margin-bottom: 0px;
}

#top #right #content {
  width: 100%;
  height: 120px;
  text-indent: 2em;
  margin: 0px;
  margin-left: 25px;
}

#top #right #date {
  width: 100%;
  text-align: center;
  color: #acacac;
}

#right textarea {
  width: 300px;
  resize: none;
  vertical-align: top; /*调整对齐线*/
  padding-left: 10px;
  padding-top: 10px;
}

#right #date #updata {
  width: 100px;
  height: 50px;
  font-size: 18px;
  background-color: #0db9f8;
  margin-right: 50px;
  border-radius: 12px;
}

#right #date #updata:hover {
  background-color: cornflowerblue;
}
</style>